<template>
  <div>
    <ul>
      <li v-for="item, index in arr" :key="index ">
        {{ item }}
      </li>
    </ul>
   <div>
     {{arr1}}
   </div>
   <button @click="btn">随机取名字</button>
  </div>
  <!-- 随机数公式Math.floor(Math.random()*(max-min+1))+min
  数组中最小索引值是0数组中
  最大索引值是数组总长度-1 -->
</template>

<script>
export default {
  data() {
    return {
      arr: ["小花", "小明", "小可爱", "小王"],
      arr1: "",
    };
  },
  methods: {
    btn() {
      let a = this.arr[Math.floor(Math.random() * 4)]; 
      this.arr1=a  
      //切分知识点
      //1.随机数生成 Math.floor(Math.random() * 4)
      //2.数组取值this.arr[x]
      //3.双向绑定 
      }
}
}
</script>

<style>
</style>